<template>
  <div class="wrapper_1200 selectedIndex mb-50px">
    <div class="w-100%" v-for="item in productClassifyList" :key="item.id">
      <div class="acea-row flex-between-center mb-30px bg-#e93323 py-10px px-20px rounded-8px" v-if="item.show">
        <div class="flex-1 flex justify-start items-center gap-20px text-#fff title font-500 alimama">
          <div class="text-28px">
            {{ item.name }}
          </div>
          <div class="flex-1 flex justify-start items-center gap-10px">
            <div v-for="(child, index) in item.childList" :key="index">
              {{ child.name }}
            </div>
          </div>
        </div>
        <!-- <nuxt-link
          :to="{ path: `/product/product_recommended`, query: { id: item.id, name: item.name } }"
          class="flex-y-center"
          >
        ></nuxt-link> -->
        <div class="text-14px text-#fff oppoSans-R cursors" @click="handleLeave(item)">
            更多<span class="iconfont icon-gengduo ml-4px"></span></div>
      </div>
      <selectedClassifyItem :item="item.childList" :current="item.id" v-if="item.show" @handleSubmitLeave="handleSubmitLeave"></selectedClassifyItem>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { categoryTreeApi } from '~/server/goodsApi'
import selectedClassifyItem from './selectedClassifyItem.vue'
const router = useRouter()
const { data: productClassify } = await useAsyncData(async () => categoryTreeApi())
const hiddenIds = ref<number[]>([])

const SORTIDS = [1, 610, 619, 209, 568, 122, 381, 563, 442, 572, 577, 5, 401]
const productClassifyList = computed(() => {
  // productClassify.value 按照 SORTIDS 排序
  // productClassify.value

  return productClassify.value
  .sort((a: any, b: any) => SORTIDS.indexOf(a.id) - SORTIDS.indexOf(b.id))
  .filter((item: any) => item.childList.length > 0)
  .map((item: any) => {
    return {
      ...item,
      show: hiddenIds.value.includes(item.id) ? false : true
    }
  })
})

// const handleClick = (item:any) => {
//   router.push(`/product/product_recommended?id=${item.id}&name=${item.name}`)
//   // product/product_recommended?id=11&name=厨房用品
// }

const handleSubmitLeave = (item:any) => {
  hiddenIds.value.push(item)
}

const handleLeave = (item:any) => {
  const idalls = item.childList.map((v:any)=>{
   return v.childList.map((s:any)=>{
      return s.id
    })
  });
  const ids = idalls.reduce((pre:number[],cur:number[])=>{
    return pre.concat(cur)
  },[])
  // console.log(ids)
  router.push(`/product/product_list?productCid=${ids.join(',')}`)
}


</script>
<style scoped lang="scss">

</style>
